<script setup lang="ts">
import { ref, onMounted, computed } from "vue";
import Banner from "@/components/MyComponents/Banner.vue";
import { getDocContractByUserId } from "@/api/contractHomepage/docContractHome";

// 设置导航标题
const bannerTitle = ref('已签约订单');

// 搜索关键词
const searchKeyword = ref('');

// 搜索处理函数
const handleBannerSearch = (keyword: string) => {
  console.log("搜索关键词:", keyword);
  searchKeyword.value = keyword;
};

// 分页参数
const queryParams = ref({pageNum: 1, pageSize: 10});

// 已签约团队列表
const signedTeams = ref<any[]>([]);
const loading = ref(false);
const total = ref(0);

// 获取已签约团队列表
const getSignedTeams = async () => {
  loading.value = true;
  try {
    const res = await getDocContractByUserId(queryParams.value);
    if (res.code === 200) {
      // 过滤出已签约的记录
      signedTeams.value = (res.rows || []).filter((team: any) => team.contractState === 1);
      total.value = res.total || 0;
    }
  } catch (error) {
    console.error("获取已签约团队失败:", error);
  } finally {
    loading.value = false;
  }
};

// 计算过滤后的团队列表
const filteredTeams = computed(() => {
  if (!searchKeyword.value) {
    return signedTeams.value;
  }
  
  const keyword = searchKeyword.value.toLowerCase();
  return signedTeams.value.filter(team => 
    team.teamName && team.teamName.toLowerCase().includes(keyword)
  );
});

// 计算到期时间
const getExpireDate = (startTime: string, duration: number) => {
  const start = new Date(startTime);
  start.setFullYear(start.getFullYear() + duration);
  return start.toLocaleDateString();
};

// 组件挂载时获取数据
onMounted(() => {
  getSignedTeams();
});
</script>

<template>
  <div class="signed-order-history">
    <Banner :title="bannerTitle" @search="handleBannerSearch" />
    
    <!-- 加载状态 -->
    <div v-if="loading" class="loading-container">
      <el-skeleton animated>
        <template #template>
          <el-skeleton-item variant="p" style="width: 100%; height: 200px; margin-bottom: 20px" v-for="i in 5" :key="i" />
        </template>
      </el-skeleton>
    </div>
    
    <!-- 已签约团队列表 -->
    <div v-else>
      <el-empty v-if="filteredTeams.length === 0" description="暂无匹配的已签约团队" />
      
      <div class="content-container">
        <el-card class="teams-card">
          <template #header>
            <div class="card-header">
              <span>已签约团队列表</span>
            </div>
          </template>

          <div class="teams-list">
            <div
                v-for="(team, index) in filteredTeams"
                :key="index"
                class="team-item"
            >
              <el-card class="team-card" shadow="hover">
                <div class="team-content">
                  <!-- 团队标题和状态 -->
                  <div class="team-header">
                    <h3 class="team-name">{{ team.teamName }}</h3>
                    <div class="tags">
                      <el-tag type="success" size="small">已签约</el-tag>
                    </div>
                  </div>

                  <!-- 团队内容 -->
                  <div class="team-info">
                    <img
                        v-if="team.teamImg"
                        :src="$urlImage + team.teamImg"
                        alt="团队图片"
                        class="team-img"
                    />
                    <p class="team-description">{{ team.teamInfo }}</p>
                    <p>签约时长：{{ team.contractDuration }} 年</p>
                    <p>签约时间：{{ new Date(team.contractTime).toLocaleDateString() }}</p>
                    <p>到期时间：{{ getExpireDate(team.contractTime, team.contractDuration) }}</p>
                  </div>

                  <!-- 底部信息 -->
                  <div class="team-footer">
                    <div class="team-price">
                      ￥{{ team.teamPrice * team.contractDuration }}
                    </div>
                    <el-tag type="success" size="small">签约完成</el-tag>
                  </div>
                </div>
              </el-card>
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
// 复用pendingTeams.vue的样式
.signed-order-history {
  padding: 20px;
}

.content-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.teams-card {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

  .card-header {
    font-size: 18px;
    font-weight: bold;
    color: #303133;
  }
}

.teams-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  padding: 20px;
}

.team-item {
  display: flex;
  flex-direction: column;
  
  .team-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    
    .team-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      
      .team-info {
        flex: 1;
      }
    }
  }
}

.team-item {
  .team-card {
    border-radius: 8px;

    .team-content {
      .team-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;

        .team-name {
          margin: 0;
          font-size: 18px;
          color: #303133;
          font-weight: 600;
        }

        .tags {
          display: flex;
          gap: 6px;
          flex-wrap: wrap;
        }

        :deep(.el-tag) {
          font-size: 16px;
          padding: 4px 10px;
          height: auto;
          border-radius: 6px;
        }
      }

      .team-info {
        margin-bottom: 15px;

        .team-img {
          width: 100%;
          height: auto;
          max-height: 200px;
          object-fit: contain;
          border-radius: 6px;
          margin-bottom: 10px;
        }

        .team-description {
          color: #909399;
          font-size: 14px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          margin: 6px 0;
        }

        p {
          margin: 6px 0;
          font-size: 14px;
          color: #606266;
        }
      }

      .team-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .team-price {
          font-size: 18px;
          font-weight: bold;
          color: #e6a23c;
        }
      }
    }
  }
}

:deep(.el-card__header) {
  background-color: #f5f7fa;
  border-bottom: 1px solid #ebeef5;
}

.loading-container {
  padding: 20px;
}
</style>
